<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>new jsp</title>
    <link rel="stylesheet" href="/resources/lib/layui-v2.6.3/css/layui.css"
          media="all">
    <script src="/resources/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>

</head>
<body style="background-color: #f2f2f2">
<div class="layui-row" style="margin-top: 10px">
    <div class="layui-panel" style="margin-right: 20px;margin-left: 20px">
        <div class="layui-form-item">
            <div class="layui-upload-drag" id="uploadImgView" style="margin-left: 12px;margin-top: 12px">
                <i class="layui-icon ">&#xe60d;</i>
                <p>点击上传，或将图片拖拽到此处</p>
                <div id="headView">
                    <hr>
                    <img src="/user/imgDownload.do" id="headImgView" alt="上传成功后渲染" style="width: 200px;height: 200px">
                </div>
            </div>
        </div>
        <div  class="layui-form-item">
            <button id="uploadImg" type="button" class="layui-btn layui-upload-button" style="margin-left: 12px;margin-top: 12px">
                <i class="layui-icon">&#xe681;</i>上传头像
            </button>
        </div>
    </div>
</div>
<script type="text/javascript">
    layui.use(['upload','layer','jquery'],function () {
        let upload = layui.upload;
        let layer = layui.layer;
        let $ = layui.jquery;
        let path = "/user/imgDownload.do";
        upload.render({
            elem:"#uploadImgView,#uploadImg",
            url:"/user/updateHeadPortrait.do",
            size:10240,
            acceptMime:"image/*",
            done:function (res,index,upload) {
                layer.msg(res.msg)
                if (res.code==200){
                    //获取父类dom对象
                    let img = window.parent.document.getElementById("headImg")
                    path+="?"
                    img.src=path;
                    $("#headImgView").prop("src",path);
                }
            },
            auto:true
        })
    })
</script>
</body>
</html>